<template>
	<view class="u-page">
		<!-- 顶部状态栏占位 -->
		<view class="status-bar-placeholder"></view>
		<!-- 顶部标题栏 -->
		<view class="header" style="height:auto; padding-top: 10px;">
			<view class="custom-icon-badge" @click="handleIconClick">
				<up-icon name="bell-fill" size="25" color="#fff" />
				<view class="custom-badge" v-if="userInfo.tipCount > 0">{{ userInfo.tipCount }}</view>
			</view>
		</view>
		
		<!-- 客服电话弹窗 -->
		<u-popup
			:show="showServiceModal"
			@close="showServiceModal = false"
			mode="center"
			:closeOnClickOverlay="true"
			:closeable="true"
			round="10px"
		>
			<view class="service-popup">
				<view class="service-popup-title">客服电话</view>
				<view class="service-popup-content">
					<text class="phone-number">{{ phoneNumber }}</text>
				</view>
				<view class="service-popup-buttons">
					<up-button type="primary" class="submit-btn" @click="callPhoneNumber">拨打</up-button>
				</view>
			</view>
		</u-popup>
		
		<!-- 用户信息区域 -->
		<view class="user-info-section">
			<view class="user-avatar-container">
				<image class="user-avatar" :src="(userInfo.info.avatar??'/static/logo.png')" mode="aspectFill"></image>
				<view class="user-details">
					<text class="user-name">{{ userInfo.info.name }}</text>
					<text class="user-role">角色：{{ userInfo.info.jobName }}</text>
				</view>
				<up-icon name="arrow-right" size="20" color="#fff" @click="publicNavigate('/pages/my/info')"  class="arrow-icon"/>
			</view>
		</view>
		
		<!-- 资产信息卡片 -->
		<!-- <view class="asset-card">
			<view class="asset-header">
				<view class="asset-title-container">
					<text class="asset-title">我的资产(元)</text>
					<up-icon :name="showAsset ? 'eye-fill' : 'eye-off'" size="18" color="#333" @click="toggleAssetVisibility"/>
					<view class="asset-tag">本提现金额年化2.0%计价收益</view>
				</view>
			</view>
			
			<view class="asset-amount" @click="publicNavigate('/pages/my/asset')">
				<text>{{ showAsset ? userInfo.amount : '****' }}</text>
				<up-icon name="arrow-right" size="18" color="#333" class="amount-arrow"/>
			</view>
			
			<view class="asset-details">
				<view class="asset-detail-item">
					<text class="detail-label">昨日收益(元)</text>
					<text class="detail-value">{{ showAsset ? userInfo.lastAmountAdd??0 : '**' }}</text>
				</view>
				<view class="asset-detail-divider"></view>
				<view class="asset-detail-item">
					<text class="detail-label">累计收益(元)</text>
					<text class="detail-value">{{ showAsset ? userInfo.amountAddSum??0 : '**' }}</text>
				</view>
			</view>
		</view> -->
		
		<!-- 常用服务菜单 -->
		<view class="service-section">
			<text class="section-title">常用服务</text>
			<u-grid :col="3" :border="false" >
				<u-grid-item v-for="(item, index) in serviceList" :key="index" @click="handleServiceClick(item.url)">
					<view class="service-item">
						<image :src="item.icon" class="service-icon"></image>
						<text class="service-name">{{ item.name }}</text>
					</view>
				</u-grid-item>
			</u-grid>
		</view>
	</view>
</template>

<script setup>
	import { onShow } from "@dcloudio/uni-app"
	import { ref, onMounted, reactive } from 'vue';
	// 使用ES模块导入语法
	import { navigate as publicNavigate } from '@/utils/public.js';
	import { getById } from '@/api/sysConfig.js'
	// 通知数量
	const tipCount = ref(5);

	// 资产显示状态
	const showAsset = ref(true);

	// 客服弹窗显示状态
	const showServiceModal = ref(false);
	
	const userInfo = ref(
		{ 
			info: {
				name: '---',
				jobName: '---',
				avatar: '/static/logo.png',
			}, 
							lastAmountAdd: 0,
				amountAddSum: 0,
			amount: 0 
		}
	);
	const flushInfo = () => { 
		userInfo.value = JSON.parse(uni.getStorageSync('userInfo'));
		console.log('userInfo', userInfo)
	}
	const getPhone = async () =>{
		const res = await getById(5).catch(err=>{
			console.log(err)
		})
		if(res && res.code === 200){
			phoneNumber.value = res.data.vo.value
		}
	}

	const phoneNumber = ref('028123456');
	
	// 切换资产显示/隐藏
	const toggleAssetVisibility = () => {
		showAsset.value = !showAsset.value;
	};
	// 拨打电话
	const callPhoneNumber = () => {
		uni.makePhoneCall({
			phoneNumber: phoneNumber.value,
			success: () => {
				console.log('拨打电话成功');
			},
			fail: (err) => {
				console.log('拨打电话失败', err);
			}
		});
	};
	
	// 服务菜单配置
	const serviceList = ref([
		{
			name: '联系客服',
			icon: '/static/headset.svg',
			url: 'service'
		},
		{
			name: '银行卡管理',
			icon: '/static/credit-card.png',
			url: '/pages/my/bank'
		},
		{
			name: '账号与安全',
			icon: '/static/safety.png',
			url: '/pages/my/setting'
		},
		{
			name: '关于平台',
			icon: '/static/md-album.png',
			url: '/pages/my/about'
		}
	]);
	
	// 处理图标点击 - 查看通知
	const handleIconClick = () => {
		// 使用公共导航方法跳转到通知页面
		publicNavigate('/pages/notice/notice');
	};
	
	// 处理服务菜单点击
	const handleServiceClick = (url) => {
		if (url === 'service') {
			showServiceModal.value = true;
			return;
		}
		publicNavigate(url);
	};
	
	// 组件挂载时的初始化
	onShow(() => {
		// 可以在这里加载用户信息、资产数据等
		flushInfo();
		getPhone();
		console.log('我的页面已加载');
	});
</script>

<style lang="scss">
	.status-bar-placeholder {
		height: 44px;
	}
	
	.header {
		height: 48px;
		background-color: transparent;
		display: flex;
		align-items: center;
		padding: 0 16px;
	}
	
	.service-popup {
	width: 280px;
	background-color: #fff;
	border-radius: 10px;
	padding-bottom: 20px;
	overflow: hidden;
}

.service-popup-title {
	padding: 20px 0;
	text-align: center;
	font-size: 16px;
	font-weight: bold;
	color: #333;
	border-bottom: 1px solid #eee;
}

.service-popup-content {
	padding: 30px 0;
	display: flex;
	justify-content: center;
	align-items: center;
}

.phone-number {
	font-size: 18px;
	font-weight: bold;
	color: #333;
}

.service-popup-buttons {
	display: flex;
	border-top: 1px solid #eee;
	margin: 0 20px;
}

.cancel-button, .confirm-button {
	flex: 1;
	padding: 15px 0;
	text-align: center;
	font-size: 16px;
}

.cancel-button {
	color: #666;
	border-right: 1px solid #eee;
}

.confirm-button {
	color: #2979ff;
	font-weight: bold;
}
.submit-btn {
    width: fit-content;
	padding: 0 40px;
    line-height: 20pt;
	border-radius: 5pt;
	background-color: rgba(21,112,220,1);
	color: rgba(255,255,255,1);
	font-size: 14pt;
	text-align: center;
	font-family: PingFangSC-regular;
}
	/* 自定义徽章样式 */
	.custom-icon-badge {
		display: inline-flex;
		position: relative;
		padding: 4px;
		border-radius: 4px;
	}
	
	.custom-badge {
		position: absolute;
		top: 0;
		right: 0;
		height: 18px;
		padding: 0 6px;
		line-height: 18px;
		font-size: 12px;
		color: #fff;
		background-color: #ff3b30;
		border-radius: 10px;
		text-align: center;
		transform: translate(30%, -30%);
	}
	
	.u-page {
		background: linear-gradient(180deg, #4A90E2 0%, #fff 100%);
		min-height: 100vh;
	}
	
	/* 用户信息区域样式 */
	.user-info-section {
		padding: 0 16px;
		margin-bottom: 20px;
	}
	
	.user-avatar-container {
		display: flex;
		align-items: center;
		padding: 10px 0;
	}
	
	.user-avatar {
		width: 60px;
		height: 60px;
		border-radius: 50%;
		background-color: #fff;
		margin-right: 15px;
	}
	
	.user-details {
		flex: 1;
		display: flex;
		flex-direction: column;
	}
	
	.user-name {
		font-size: 18px;
		font-weight: bold;
		color: #fff;
		margin-bottom: 5px;
	}
	
	.user-role {
		font-size: 14px;
		color: rgba(255, 255, 255, 0.8);
	}
	
	.arrow-icon {
		margin-left: 10px;
	}
	
	/* 资产卡片样式 */
	.asset-card {
		margin: 0 16px 20px;
		padding: 16px;
		background-color: #fff;
		border-radius: 8px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	}
	
	.asset-header {
		margin-bottom: 15px;
	}
	
	.asset-title-container {
		display: flex;
		align-items: center;
		margin-bottom: 5px;
		flex-wrap: nowrap;
	}
	
	.asset-title {
		font-size: 16px;
		font-weight: bold;
		color: #333;
		margin-right: 8px;
		flex-shrink: 0;
	}
	
	.asset-tag {
		font-size: 12px;
		color: #666;
		background-color: #ffcba7;
		padding: 3px 8px;
		border-radius: 12px;
		margin-left: 10px;
		flex-shrink: 0;
	}
	
	.asset-amount {
		font-size: 28px;
		font-weight: bold;
		color: #333;
		margin: 15px 0;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}
	
	.amount-arrow {
		margin-left: 10px;
	}
	
	.asset-details {
		display: flex;
		justify-content: flex-start;
		padding-top: 15px;
	}
	
	.asset-detail-divider {
		width: 2px;
		height: 40px;
		margin: 0 20px;
	}
	
	.asset-detail-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.detail-label {
		font-size: 12px;
		color: #666;
		margin-bottom: 5px;
	}
	
	.detail-value {
		font-size: 16px;
		color: #333;
		font-weight: bold;
	}
	
	/* 服务菜单样式 */
	.service-section {
		margin: 0 16px;
		padding: 16px 0;
		background-color: #fff;
		border-radius: 8px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	}
	
	.section-title {
		font-size: 16px;
		font-weight: bold;
		padding: 0 16px 0;
		color: #333;
		margin-bottom: 15px;
		display: block;
	}
	
	.service-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 5px;
		width: 100%;
	}
	
	.service-icon {
		width: 28px;
		height: 28px;
	}
	
	.service-name {
		font-size: 14px;
		color: #333;
		margin-top: 8px;
		text-align: center;
	}
</style>